<template>
  <span
    class="rounded-md hover:text-primary-500 focus:outline-none transition ease-in-out duration-150"
    aria-label="Color Mode"
    @click="handleSwitchColor"
  >
    <client-only>
      <SvgIconSun v-if="$colorMode.value === 'light'" class="Icon Icon-text" />
      <SvgIconMoon v-else class="Icon Icon-text" />
    </client-only>
  </span>
</template>

<script>
export default {
  name: 'BtnSwitchColor',
  methods: {
    handleSwitchColor() {
      this.$colorMode.preference =
        this.$colorMode.value === 'dark' ? 'light' : 'dark'
    },
  },
}
</script>
